<template>
  <div class="CustomSelect">
    <el-select
      v-model="formValue"
      v-bind="$attrs.attributes"
      @change="$attrs.attributes.isTriggerChange ? handleChange($event) : ''"
    >
      <el-option
        v-for="(option, i) in $attrs.attributes.options"
        :key="i + 'op'"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
  </div>
</template>

<script>
export default {
    inheritAttrs: false,// 不让子组件的根节点渲染属性
    name:"select",
    path:"CustomSelect/Index"
}
</script>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  inject,
  defineEmits,
  // defineModel,
  defineProps,
  computed
} from "vue";
import { useAttrs } from "vue";
const attrs = useAttrs();

const props = defineProps(["modelValue"]);
const emits = defineEmits(["notify", "update:modelValue"]);
const formValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emits("update:modelValue", value);
  }
});
// console.log("attrs", attrs);

function handleChange(val) {
  emits("notify", {
    event: "change",
    changePropName: "",
    changeValue: val,
    formValue: formValue.value
  });
}
</script>

<style lang="less" scoped>
.CustomSelect {
  width: 100%;
  height: 100%;
}
</style>
